<template>
  <div style="height: 100%">
    <el-container style="height: 100%;">
      <el-header>XXX权限管理系统</el-header>
      <el-main>
        <el-card class="box-card">


          <el-form ref="form" :model="form">
            <el-form-item>
              <el-input clearable v-model="form.username" placeholder="username"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input clearable type="password" v-model="form.password" placeholder="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input clearable style="display: inline-block;width: 69%;float: left" v-model="form.verificationCode"
                        placeholder="验证码"></el-input>
              <el-image @click="getCaptcha()" :src="captcha" style="display: inline-block;float: left"
                        alt=""></el-image>
            </el-form-item>
            <el-form-item style="margin-bottom: 0">
              <div>

                <el-button :loading="loginBtnLoading" style="display: inline-block" @click="execLogin()" type="primary">
                  登录
                </el-button>
                <el-button style="display: inline-block">取消</el-button>
              </div>

            </el-form-item>

          </el-form>

        </el-card>


      </el-main>
      <el-footer>
        copyright by XXXX
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import {setKV} from "@/cookie/cookieUtil";
import {doLogin} from "@/api/login/login-api";
import {getCaptchaCode} from "@/api/login/login-api";

export default {
  name: "login",
  data() {
    return {
      loginBtnLoading: false,
      form: {
        verificationCode: '',
        username: '',
        password: '',
        uuid: ''
      },
      captcha: '',
      captchaUUID: ''
    }
  },

  mounted() {
    this.getCaptcha();

  },
  methods: {
    execLogin() {
      this.loginBtnLoading = true;
      //前端使用md5加密密码
      let passMd5 = this.$md5(this.form.password)
      this.form.uuid = this.captchaUUID;
      let reqJson =  JSON.parse(JSON.stringify(this.form));
      reqJson.password = passMd5;
      doLogin(reqJson).then(res => {
        this.loginBtnLoading = false;
        console.log(res);
        if (res.data.code === 0) {
          console.log(res.data.token)
          setKV('loginInfo', res.data)
          this.$message.success(res.data.msg)
          this.$router.push({path: '/home/main'})
        } else {
          this.$message.error(res.data.msg);
          this.getCaptcha();
        }
      }).catch(err => {
        this.loginBtnLoading = false;
        this.getCaptcha();
        console.log(err);
      });
    },

    getCaptcha() {

      getCaptchaCode().then(res => {
        this.captcha = res.data.data.pic64;
        this.captchaUUID = res.data.data.uuid;
      }).catch(err => {
        console.log(err);
      });
    }

  },

}
</script>
<!--  让div水平垂直居中的六种方法  -->
<!--
https://blog.csdn.net/ActiveQi/article/details/98987178
-->
<style scoped>

.box-card {
  width: 400px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -160px;

}

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}


.el-main {
  background-color: #E9EEF3;
  color: #333;
  /*text-align: center;*/
}

/*body > .el-container {*/
/*    margin-bottom: 60px;*/
/*}*/

/*.el-container:nth-child(5) .el-aside,*/
/*.el-container:nth-child(6) .el-aside {*/
/*    line-height: 260px;*/
/*}*/

/*.el-container:nth-child(7) .el-aside {*/
/*    line-height: 320px;*/
/*}*/
</style>
